<template>
  <Dialog :title="title" :model-value="visible" width="900px" :before-close="closeForm">
    <Table :data="powers" row-key="Id" max-height="500px" :columns="columns" @change="reset">
      <template #title>
        <BaseButton type="success" v-hasPermi="'operate.add'" @click="addOp">新增</BaseButton>
      </template>
      <template #IsEnable="e">
        <el-switch
          v-model="e.row.IsEnable"
          :disabled="$hasPermi('operate.set') == false"
          active-text="启用"
          inactive-text="停用"
          @change="setState(e.row)"
        />
      </template>
      <template #OperateName="e">
        <span v-if="e.row.op == 'view'">{{ e.row.OperateName }}</span>
        <el-input v-else v-model="e.row.OperateName" placeholder="权限名" class="el-input" />
      </template>
      <template #OperateVal="e">
        <span v-if="e.row.op == 'view' || e.row.op == 'edit'">{{ e.row.OperateVal }}</span>
        <el-input v-else v-model="e.row.OperateVal" placeholder="权限值" class="el-input" />
      </template>
      <template #Show="e">
        <span v-if="e.row.op == 'view'">{{ e.row.Show }}</span>
        <el-input v-else v-model="e.row.Show" placeholder="说明" class="el-input" />
      </template>
      <template #action="e">
        <template v-if="e.row.op !== 'view'">
          <BaseButton
            size="small"
            type="primary"
            title="保存"
            :icon="saveIcon"
            circle
            @click="saveOp(e.row)"
          />
          <BaseButton
            size="small"
            type="danger"
            title="取消"
            :icon="closeIcon"
            circle
            @click="cancelOp(e.row)"
          />
        </template>
        <template v-else-if="e.row.IsEnable == false">
          <BaseButton
            size="small"
            type="primary"
            v-hasPermi="'operate.set'"
            title="编辑菜单"
            :icon="editIcon"
            circle
            @click="editOp(e.row)"
          />
          <BaseButton
            size="small"
            type="danger"
            v-hasPermi="'operate.delete'"
            title="删除菜单"
            :icon="dropIcon"
            circle
            @click="dropOp(e.row)"
          />
        </template>
      </template>
    </Table>
  </Dialog>
</template>

<script>
import { Dialog } from '@/components/Dialog'
import { Table } from '@/components/Table'
import { Gets, SetIsEnable, Set, Add, Delete } from '@/api/role/opPower'
import { useIcon } from '@/hooks/web/useIcon'
export default {
  components: {
    Dialog,
    Table
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    powerName: {
      type: String,
      default: null
    },
    powerId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '编辑菜单权限',
      powers: [],
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      closeIcon: useIcon({ icon: 'ep:close' }),
      saveIcon: useIcon({ icon: 'ep:check' }),
      columns: [
        {
          field: 'OperateName',
          label: '权限名',
          align: 'left',
          slotName: 'OperateName',
          minWidth: 150
        },
        {
          field: 'OperateVal',
          label: '权限值',
          align: 'left',
          slotName: 'OperateVal',
          minWidth: 150
        },
        {
          field: 'IsEnable',
          label: '是否启用',
          align: 'center',
          slotName: 'IsEnable',
          minWidth: 150
        },
        {
          field: 'Show',
          label: '说明',
          align: 'left',
          slotName: 'Show',
          minWidth: 150
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          slotName: 'action',
          width: 150
        }
      ]
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    async dropOp(row) {
      await Delete(row.Id)
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
      this.reset()
    },
    checkPower(power) {
      return this.rolePower.includes(power)
    },
    async reset() {
      const res = await Gets(this.powerId)
      res.forEach((a) => {
        a.op = 'view'
      })
      this.powers = res
    },
    addOp() {
      if (this.powers.findIndex((c) => c.Id == null) !== -1) {
        this.$message({
          type: 'warning',
          message: '还有未保存的权限!'
        })
        return
      }
      this.powers.push({
        Id: null,
        IsEnable: false,
        Show: null,
        OperateName: null,
        OperateVal: null,
        op: 'add'
      })
    },
    cancelOp() {
      this.reset()
    },
    saveOp(row) {
      if (row.OperateName == null || row.OperateName === '') {
        this.$message({
          type: 'warning',
          message: '权限名不能为空!'
        })
        return
      } else if (row.op === 'add' && (row.OperateVal == null || row.OperateVal === '')) {
        this.$message({
          type: 'warning',
          message: '权限值不能为空!'
        })
        return
      }
      if (row.op === 'edit') {
        this.set(row)
      } else {
        this.add(row)
      }
    },
    async set(row) {
      await Set(row.Id, {
        PowerId: this.powerId,
        IsEnable: row.IsEnable,
        Show: row.Show,
        OperateName: row.OperateName
      })
      this.reset()
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
    },
    async add(row) {
      await Add({
        PowerId: this.powerId,
        IsEnable: row.IsEnable,
        Show: row.Show,
        OperateName: row.OperateName,
        OperateVal: row.OperateVal
      })
      this.reset()
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
    },
    closeForm() {
      this.$emit('update:visible', false)
    },
    editOp(row) {
      row.op = 'edit'
    },
    async setState(row) {
      if (row.op !== 'view') {
        return
      }
      await SetIsEnable(row.Id, row.IsEnable)
      this.reset()
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
    }
  }
}
</script>
